﻿<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	
	<title>我的桌面</title>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />

	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    
    <script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.min.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	
	<script type="text/javascript">
	   $(function(){
	       //使用ajax加载数据
		   $.get("emp/piechart.action","",function(res){
		   	     initchart(res);
		   },"json");
	   
	   })
	  function initchart(xxx)
	  {
	     var myChart = echarts.init(document.getElementById('mainChart'));
        option = {
                title : {
                    text: '各个部门薪资统计',
                    subtext: '统计数据',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
               
                series : [
                    {
                        name: '薪资',
                        type: 'pie',
                        radius : '60%',
                        center: ['50%', '60%'],
                        data:xxx,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 30,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }       
                    }
                ]
            };
                    myChart.setOption(option);
	  }
	
	</script>
  
	<script type="text/javascript">
	   var barChart;
	   $(function(){
	       barChart = echarts.init(document.getElementById("bar"));
		   //使用ajax加载数据
		   $.get("emp/barchart.action","",function(res){
		   	     initchartxx(res.names,res.values);
		   },"json");
	   })
	   
	  function initchartxx(nn,vv)
	  {
	      option = {
			    color: ['#36648B'],
			    title : {
                    text: '各个部门人数统计',
                    subtext: '统计数据',
                    x:'center'
                },
			    tooltip : {
			        trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			        type : 'shadow'           // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    grid: {
			        left: '2%',
			        right: '2%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
			            type : 'category',
			            data : nn,
			            axisTick: {
			                alignWithLabel: true
			            }
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            name:'人数',
			            type:'bar',
			            barWidth: '30%',
			            data:vv
			        }
			    ]
			};
          barChart.setOption(option);
	  }
	
	</script>
    
</head>
<body>
<div class="page-container">
	<p class="f-20 text-success">欢迎来到人事招聘的后台管理系统</p>
	<!-- <img  src="images/timg-7.jpg"> -->
	
	  <div id="dyx"  style="height: 500px;width: 900px;margin-top: 50px;margin-left:20px;">
           <div id="bar" style="border: 0px solid #438FB9;width: 400px;height: 300px; float:left;"></div>
      
           <div id="mainChart" style="border: 0px solid #438FB9; width:400px; height:300px;float:right;"></div>
       </div>
       
	
</div>

<footer class="footer mt-20">
	<div class="container">
		<p>感谢jQuery、layer、laypage、Validform、UEditor、My97DatePicker、iconfont、Datatables、WebUploaded、icheck、highcharts、bootstrap-Switch<br>
			Copyright &copy;2015-2017 H-ui.admin v3.1 All Rights Reserved.<br>
			本后台系统由<a href="http://www.h-ui.net/" target="_blank" title="H-ui前端框架">H-ui前端框架</a>提供前端技术支持</p>
			<p>More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	</div>
</footer>


<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 

</body>
</html>